<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>攀枝花智慧旅游后台网站</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/dropzone/dropzone.css" rel="stylesheet" type="text/css" />
    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    <link href="assets/css/mycss.css" rel="stylesheet" >
    <link href="assets/css/pagination.css" rel="stylesheet">

    <link rel="stylesheet" href="assets/layui/css/layui.css">



</head>

<body class="sticky-header">


<!--开始左边的菜单栏-->
<div class="left-side sticky-left-side">

    <!--上方的logo-->
    <div class="logo">
        <a href="index.html"><img src="assets/images/logo.png" alt=""></a>
    </div>

    <div class="logo-icon text-center">
        <a href="index.html"><img src="assets/images/logo-icon.png" alt=""></a>
    </div>
    <!--logo-->

    <div class="left-side-inner">
        <!--Sidebar nav-->
        <ul class="nav nav-pills nav-stacked custom-nav">
            <li class="menu-list"><a href="preIndex.html"><i class="icon-home"></i> <span>后台管理</span></a>
                <ul class="sub-menu-list">
                    <li class="active"><a href="preIndex.html">后台首页</a></li>
                </ul>
            </li>
            <li class="menu-list "><a href="index.html"><i class="icon-home"></i> <span>资讯管理</span></a>
                <ul class="sub-menu-list">
                    <li  class="active"><a href="index.html">查看当前资讯</a></li>
                    <li><a href="modify_information.html">修改资讯</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-layers"></i> <span>风景名胜管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_famous_scenery.html">查看现有的风景名胜</a></li>
                    <li><a href="modify_famous_scenery.html">修改风景名胜</a></li>
                </ul>
            </li>

            <li class="menu-list"><a href="#"><i class="icon-grid"></i> <span>美食管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_delicious_food.html">查看现有的美食</a></li>
                    <li><a href="modify_delicious_food.html">修改美食信息</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-envelope-open"></i> <span>旅游路线管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_route.html">查看现有的路线</a></li>
                    <li><a href="modify_route.html">修改路线</a></li>
                </ul>
            </li>

            <li class="menu-list nav-active"><a href="#"><i class="icon-loop"></i> <span>酒店的管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_hotel.html">查看现有的酒店</a></li>
                    <li><a href="modify_now_hotel.html">查看所有酒店的全部订单</a></li>
                    <li><a href="form-wizard.html">查看全部酒店的房源信息</a></li>
                </ul>
            </li>


            <li class="menu-list"><a href="#"><i class="icon-film"></i> <span>特产管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_specialty_food.html">查看现有的特产</a></li>
                    <li><a href="modify_specialty_food.html">增加特产</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-film"></i> <span>用户管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_user.html">查看所有的用户</a></li>
                    <li><a href="add_user.html">增加用户</a></li>
                </ul>
            </li>




            <li class="menu-list"><a href="#"><i class="icon-lock"></i> <span>账户信息</span></a>
                <ul class="sub-menu-list">
                    <li><a href="admin_information.html"> 查看信息 </a></li>
                    <li><a href="forgot-password.html"> 修改密码 </a></li>
                </ul>
            </li>

            <li><a href="calendar.html"><i class="icon-note"></i> <span>网站首页</span></a></li>
            <li><a href="http://www.pzhu.edu.cn/"><i class="icon-wrench"></i> <span>攀枝花简介</span></a></li>

        </ul>
        <!--侧边栏结束-->

    </div>
</div>
<!--End left side menu-->

<!-- 中间面板开始-->
<div class="main-content" >

    <!-- 中间头部开始-->
    <div class="header-section">

        <!--控制侧边栏的伸缩状态-->
        <a class="toggle-btn"><i class="fa fa-bars"></i></a>

        <!--头部右边框的信息-->
        <div th:replace="preIndex :: userAdminInfo">

        </div>
        <!--中间头部结束-->

    </div>
    <!--头部分结束-->


    <!--中间包装部分开始-->
    <div class="wrapper">

        <!--中间部分的标题-->
        <div class="page-title-box">
            <h4 class="page-title">当前风景名胜 </h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">风景名胜管理</a>
                </li>

                <li class="active">
                    <a href="#">查看现有的风景名胜</a>
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--中间部分的标题结束-->
        <!--Start row-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box">

                    <form class="layui-form" action="">
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label mylabel">酒店名称</label>
                            <div class="layui-input-block">
                                <input type="text" id="hotelName" name="title" required lay-verify="required" placeholder="请输入酒店名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label mylabel">酒店地址</label>
                            <div class="layui-input-block">
                                <input type="text" id="hotelAddress" name="title" required lay-verify="required" placeholder="请输入酒店地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label mylabel">联系电话</label>
                            <div class="layui-input-block">
                                <input type="text" id="hotelTel" name="title" required lay-verify="required" placeholder="请输入酒店联系电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label mylabel">酒店评分</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required" id="hotelScore">
                                    <option value="0" selected>1</option>
                                    <option value="1">2</option>
                                    <option value="2">3</option>
                                    <option value="3">4</option>
                                    <option value="4">5</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label mylabel">酒店分类</label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required" id="typeSelect">

                                </select>
                            </div>
                        </div>



                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <div class="btn-group btn-group-lg" role="group" >
                                    <a type="button" class="btn btn-default" href="show_now_hotel.html">回首页</a>
                                    <button type="button" class="btn btn-default" id="submitEditorBtn" lay-filter="formDemo">提交</button>
                                    <button type="button" class="btn btn-default" id="clearEditorBtn">清空</button>
                                    <button type="button" class="btn btn-default" id="imgSizeBtn">图片大小</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!--Start Page Title-->
                    <!--End Page Title-->

                    <!--Start row-->
                    <div class="row">
                        <div class="col-md-12">
                            <form action="#" class="dropzone" id="dropzone">
                                <div class="fallback">
                                    <input name="file" type="file" multiple />
                                </div>
                            </form>
                        </div>
                    </div>

                    <!--//这里还需要一个输入框-->
                    <div id="editor">
                        <p>开始输入你的内容吧！！</p>
                    </div>

                </div>
            </div>
        </div>
        <!--End row-->

    </div>
    <!-- End Wrapper-->


    <!--//这里应该还需要一个分页的按键-->
    <!--Start  Footer -->
    <footer class="footer-main">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">攀枝花学院</a></footer>
    <!--End footer -->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close closeBtn" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">图片大小设定</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <table id="imagForeach">
                            <!--                        <tr>-->
                            <!--                            <th>图片展示</th>-->
                            <!--                            <th>最大宽度</th>-->
                            <!--                        </tr>-->
                            <!--                            <td><img src="http://192.168.153.250/group1/M00/00/00/wKiZ-l3eeXmAfYlnABi8EWbebEw416.jpg" alt="" width="100" height="50"></td>-->
                            <!--                            <td><input type="text" placeholder="请输入最大宽度"></td>-->
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default closeBtn" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="OkBtn">确认应用</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<!--End main content -->


<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script  src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->

<script src="assets/js/jquery.pagination.js"></script>
<script src="assets/layer/layer.js"></script>

<script src="assets/plugins/dropzone/dropzone.js"></script>
<script src="wangEditor/wangEditor.js"></script>
<script src="assets/layui/layui.js"></script>



<!-- End core plugin -->

<script>

    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.showLinkImg = false
    editor.customConfig.uploadImgServer = '/upload'
    editor.customConfig.uploadFileName = 'photo'
    // 设置图片上传的最大大小为10m
    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
    //设置最大图片篇数为5；
    editor.customConfig.uploadImgMaxLength = 5

    // editor.customConfig.uploadImgHooks = {
    //     customInsert: function (insertImg, result, editor) {
    //         var datas =result.data;//获取后台返回的url
    //         for (var i = 0 ; i < datas.length ; i++){
    //             insertImg(datas[i]);
    //             console.log(datas[i]);
    //         }
    //     }
    // };
    editor.create()

    //存放images信息的容器；
    window.images = [];


    //增加js库中数组的默认元素。
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };

    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    //App函数对象
    var App = function () {
        //默认的Dropzone参数
        var defaultDropzoneOpts = {
            url: "", // 文件提交地址
            method: "post",  // 也可用put
            paramName: "dropFile", // 提交的参数,默认为file
            maxFiles: 5,// 一次性上传的文件数量上限
            maxFilesize: 5, // 文件大小，单位：MB
            acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
            addRemoveLinks: true,
            parallelUploads: 1,// 一次上传的文件数量
            dictDefaultMessage: '添加封面大图',
            dictMaxFilesExceeded: "您最多只能上传"+this.maxFiles+"个文件！",
            dictResponseError: '文件上传失败!',
            dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
            dictFallbackMessage: "浏览器不受支持",
            dictFileTooBig: "文件过大上传文件最大支持.",
            dictRemoveLinks: "删除",
            dictCancelUpload: "取消"
        };
        /*
        * 初始化Dropzone
        * */
        var handlerInitDropzone = function (opts) {
            //关闭Dropzone自动发现功能
            Dropzone.autoDiscover = false;
            //继承
            $.extend(defaultDropzoneOpts,opts);
            return new Dropzone(defaultDropzoneOpts.id, defaultDropzoneOpts);
        };
        return{
            //初始化Dropzone
            initDropzone:function (opts) {
                return handlerInitDropzone(opts);
            }
        }
    }();



    //初始化Dropzone
    var dropz = App.initDropzone({
        id: "#dropzone",
        url: "/app/upload",
        init: function () {
            this.on("success", function (file, data) {
                //在上传成功文件的时候，触发函数，file为源文件对象；
                //获取后台传回的文件名，放入输入框
                //data为后台传送到前台的json对象;
                var fileName = data.fileName;
                //我们把上传的路径，存入一个集合中;
                file.src = fileName;
                // console.log(fileName)
                images.push(fileName)
            });
            this.on("removedfile",function (file) {
                //在点击删除文件的时候，触发函数，file为源文件对象；
                var fileName = file.src;
                images.remove(fileName);
                // console.log("循环输出images的内容");
                // for (var i = 0 ; i < images.length ; i++){
                //     console.log(images[i]);
                // }
            })
        }
    });


    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    $(function () {
        gernaatorClassification();

        //清空编辑器的信息；
        $("#clearEditorBtn").click(function () {
            editor.txt.clear();
        })

        $("#imgSizeBtn").click(function () {
            //准备数据，加入模态框；匹配editor后代元素中所有的img，wanguditor的z-index很大，必须要修改
            var imgs = $("#editor img");
            var htmlHead = "<tr><th>图片</th><th>最大宽度</th></tr>"
            $("#imagForeach").append(htmlHead);
            $.each(imgs, function (index, value) {
                var imagSrc = value.src;
                var cssValue = $(this).css('max-width');
                var htmlImagSrc = "<tr><td><img src= " + imagSrc + " alt='' width='100' height='50'></td><td><input type='text' placeholder='" + cssValue + "'></td><tr/>"
                $("#imagForeach").append(htmlImagSrc);
            });

            $("#myModal").modal("show");
        });

        $(".closeBtn").click(function () {
            // 删除子节点
            $("#imagForeach").children().remove();
            $("#myModal").modal("hide");
        });

        //改变图片尺寸的jquery代码；
        $("#OkBtn").click(function () {
            //获得模态框的数据；
            var inputWidth = $("#imagForeach input");
            var imgs = $("#editor img");
            // value为dom对象
            var array = new Array();
            $.each(inputWidth, function (index, value) {
                //把数字存入数组；
                var num = $(this).val();
                // console.log(num);
                array[index] = num;
            });
            $.each(imgs, function (index, value) {
                var maxWidth = array[index];
                //使用正则进行匹配；
                var reg = /^[0-9]*$/;
                if (!reg.test(maxWidth) || maxWidth.length > 3) {
                    layer.msg("输入有误，请重新输入！！");
                    return;
                }
                if (maxWidth == "") {
                    // 类似于continue；
                    return true;
                }
                $(this).css("max-width", maxWidth + "%");
            });

            // 删除子节点
            $("#imagForeach").children().remove();
            $("#myModal").modal("hide");
        });

        //提交编译器器的信息；
        $("#submitEditorBtn").click(function () {
            var hotelName = $("#hotelName").val();
            if ("" == hotelAddress) {
                layer.msg("请输入酒店名称！");
                return;
            }

            var hotelAddress = $("#hotelAddress").val();
            if ("" == hotelAddress) {
                layer.msg("请输入酒店地址！");
                return;
            }


            //使用正则进行匹配；
            var reg = /^[0-9]*$/;
            var hotelTel = $("#hotelTel").val();
            if (!reg.test(hotelTel)||"" == hotelTel) {
                layer.msg("请输入正确的酒店电话！");
                return;
            }

            //获得选择框的内容；
            var hotelScore = $("#hotelScore").select().val();
            var typeSelect = $("#typeSelect").select().val();

            //获得编辑框的内容
            var text = editor.txt.html();
            if ("" == text) {
                layer.msg("请输入文本内容！");
                return;
            }


            $.ajax({
                "url": "save/hotelItem",
                "type": "post",
                "data": {
                    "hotelItemSpuName": hotelName,
                    "hotelItemSpuAdress": hotelAddress,
                    "hotelItemSpuTel": hotelTel,
                    "hotelItemSpuScore": hotelScore,
                    "categorizationInformationName": typeSelect,
                    "hotelItemSpuContent": text,
                    "hotelImags": images
                },
                // "traditional": true,
                // 后台报错才走这条路
                "traditional": true,
                "error": function (response) {
                    layer.msg("服务器错误，请联系管理员！");
                    //清空资讯名称；这里需要对后台进行协调后书写；
                    return;
                },
                "success": function (response) {
                    //显示提示消息；
                    var message = response.message;
                    layer.msg(message);
                    if ("FAILED" == response.result) {
                        $("#routeName").val("");
                    } else {
                        layer.msg(message);
                    }
                }
            });
        });
    });



    function gernaatorClassification() {
        $.ajax({
            "url":"get/all/hotel/classification",
            "type":"post",
            "error":function(response){
                layer.msg("服务器错误，请联系管理员！");
                //清空资讯名称；这里需要对后台进行协调后书写；
                return;
            },
            "success":function(response){
                //显示提示消息；
                var list = response.data;
                var i = 1;
                $.each(list,function (index, value) {
                    var html;
                    var id =  value.id;
                    var categorizationInformation = value.categorizationInformation;
                    if (i == 1){
                        html = "<option selected num = "+id+">"+categorizationInformation+"</option>";
                    }else {
                        html = "<option num = "+id+">"+categorizationInformation+"</option>";
                    }
                    $("#typeSelect").append(html);
                });
            }
        });
    }

</script>

</body>

</html>
